<template>
	<view class="bgIndex ">
		<view class=" bg">
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
			<view class="flex-between margin-bottom_20rpx" v-for="(item,index) in list" :key="index">
				<view class="flex-start-center" >
					<view class="orderLocation">
						<image class="avatar" :src="item.avatar" mode=""></image>

						</image>

					</view>
					<view class="margin-left_16rpx flex-columns" style="height: 130rpx;">
						<view class="flex-start-center">
							<view class="font-overflow font-weight" style="max-width:300rpx">
								{{item.nickname}}


							</view>
							<view class="fans flex" v-if="item.is_follow_me==1">
								<text>粉丝</text>
							</view>
							<view class="follow flex" v-if="item.is_follow_me==0">
								<text>关注</text>
							</view>
						</view>


						<block v-if="item.type==2">
							<view class="font-overflow2" >
								<text style="color: #785DF6;">点赞
								</text>
								<text style="color: #999999;">了你圈子
								</text>
							
							
							</view>
							
							<view class="">
								<text style="color:#999999">{{item.update_time}}</text>
							</view>
						</block>
                        <block v-if="item.type==1">
                        	<view class="font-overflow " style="width:380rpx">
                        		<text style="color: #E02020;">评论
                        		</text>
                        		<text style="color: #999999;">：{{item.content}}
                        		</text>
                        	
                        	
                        	</view>
                        	
                        	<view class="">
                        		<text style="color:#999999">{{item.update_time}}</text>
                        	</view>
                        </block>
						
						<block v-if="item.type==3">
							<view class="font-overflow2" >
								<text style="color: #785DF6;">取消点赞了
								</text>
								<text style="color: #999999;">你圈子
								</text>
							
							
							</view>
							
							<view class="">
								<text style="color:#999999">{{item.update_time}}</text>
							</view>
						</block>
						<block v-if="item.type==4">
							<view class="font-overflow " style="width:380rpx">
								<text style="color: #E02020;">回复
								</text>
								<text style="color: #999999;">：{{item.content}}
								</text>
							
							
							</view>
							
							<view class="flex-start-center margin-top_10rpx">
								<view class="flex-start-center">
									<image class="avatarImg margin-right_16rpx" :src="item.avatar" mode=""></image>
									<view class="flex-start-center">回复<image style="margin-left: 5rpx;" class="avatarImg margin-right_16rpx" :src="item.oneserlf_avatar" mode=""></image><text style="color: rgb(81, 169, 255);">{{item.oneserlf_nickname}}</text></view>
								</view>
								<text style="color:#999999;margin-left: 15rpx;">{{item.update_time}}</text>
							</view>
						</block>
						<block v-if="item.type==5">
							<view class="font-overflow2" >
								<text style="color: #785DF6;">点赞了
								</text>
								<text style="color: #999999;">你评论
								</text>
							
							
							</view>
							
							<view class="">
								<text style="color:#999999">{{item.update_time}}</text>
							</view>
						</block>
						<block v-if="item.type==6">
							<view class="font-overflow2" >
								<text style="color: #785DF6;">取消点赞
								</text>
								<text style="color: #999999;">你的评论
								</text>
							
							
							</view>
							
							<view class="">
								<text style="color:#999999">{{item.update_time}}</text>
							</view>
						</block>
						

					</view>
				</view>
				<!-- <image class="imgEvaluation" src="../../static/第一行所有图标/矩形 169.png" mode=""></image> -->
			</view>
			</mescroll-body>
		
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				list: [],
				userInfo: uni.getStorageSync("userInfo"),
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				
				windowHeight: 0,
             
			}
		},
		onLoad() {
		
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 1500;
				}
			});
		},
		methods: {
             async upCallback(scroll) {
             
             	const result = await this.$http.post({
             		url: this.$api.message,
             		data: {
             			page: scroll.num,
             			limit: 10,
             			type:2
             
             
             
             
             		},
             		headers: {
             			'Authorization': this.userInfo.token
             		}
             
             	})
             
             
             	if (result.code == 0) {
             
             		this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
             		if (scroll.num == 1) this.list = [];
             
             		this.list = this.list.concat(result.data.list);
             
             		// 		this.list.forEach((item) => {
             
             		// 			item.labelList = item.label.split(",")
             		// 		})
             
             
             
             		console.log('this.list', this.list, this.list.length);
             	} else {
             		this.$sun.toast(result.message, 'none')
             	}
             
             
             },
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {


		.bg {
			background-color: #fff;

			// height: 743px;
			padding: 26rpx;

			.textarea-box {
				margin-top: 24rpx;
				border: 2rpx dashed #1e6ceb;
				background: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				height: 600rpx;

				.textarea-color {
					text-align: right;
					color: #999;
				}
			}
            .avatarImg{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
			.submitEvaluation {
				margin-top: 30rpx;
				height: 100rpx;
				border-radius: 56rpx;
				color: #fff;
				background: linear-gradient(90.00deg, rgb(98, 54, 255), rgb(153, 20, 223) 100%);
			}

			.fans {
				width: 68rpx;
				height: 36rpx;
				color: rgb(81, 169, 255);
				background: rgb(210, 242, 255);
			}

			.follow {
				width: 68rpx;
				height: 36rpx;
				color: rgb(182, 32, 224);
				background: rgb(247, 219, 255);
			}

			.orderLocation {
				position: relative;

				.avatar {
					width: 152rpx;
					height: 152rpx;
					border-radius: 50%;
				}

				.orderImg {
					width: 180rpx;
					height: 180rpx;
					border-radius: 20rpx;

				}

				.orderStatusImg {
					position: absolute;
					left: 0;
					top: 0;
					width: 106rpx;
					height: 48rpx;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					color: #fff;
					background: rgb(224, 32, 32);
					z-index: 999;
				}

				.orderStatusImged {
					position: absolute;
					left: 0;
					top: 0;
					width: 106rpx;
					height: 48rpx;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					color: #fff;
					border-radius: 16rpx 0rpx 16rpx 0rpx;

					background: rgb(0, 0, 0);
					z-index: 999;
				}
			}

			.imgEvaluation {
				width: 176rpx;
				height: 176rpx;
			}
		}

	}
</style>